<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/scan/scanItem.css"/>
	</head>

	<body>
		<div id="controller">
			<header class="mui-bar mui-bar-nav">
			    <a v-show='!back' class="mui-icon mui-icon-left-nav mui-pull-left" @click="toScan('scan.html')">扫一扫</a>
				<a v-show='back' class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left">食药地图</a>
			    <h1 class="mui-title levelellipsis">{{ name }}</h1>
			    <span id="tab" class="mui-icon mui-pull-right">
			    	<a href="javascript:;" class="active" @click="ckeckTab($event)">动态</a>
			    	<a href="javascript:;" @click="ckeckTab($event)">年度</a>
			    </span>
			</header>
			<div class="mui-content">
				<div class="dyn" v-if="flag">
				    <div class="supItems" v-for="dyn in dataObj.dynlevelList">
				    	<p class="title">{{ dyn.year }}</p>
				    	<div class="itemContent">
				    		<p class="face">动态等级：<i></i><span>{{ dyn.level }}</span></p>
				    		<p>上年度综合等级：<span>{{ dyn.ylevel }}</span></p>
				    		<p>评定日期：<span>{{ dyn.reviewtime }}</span></p>
				    		<p>评定人：<span>{{ dyn.person }}</span></p>
				    	</div>
				    </div>
				</div>
				<div class="year" v-else>
					<div class="supItems" v-for="year in dataObj.yearlevelList">
				    	<p class="title">{{ year.year }}</p>
				    	<div class="itemContent">
				    		<p class="face">年度等级：<span>{{ year.level }}</span></p>
				    		<p>评定日期：<span>{{ year.reviewtime }}</span></p>
				    		<p>评定人：<span>{{ year.person }}</span></p>
				    	</div>
				    </div>
				</div>
			</div>
			<div v-show='!back' class="detail">
				<a href="#popover" id="openPopover"></a>
			</div>
			<div id="popover" class="mui-popover">
				<ul class="mui-table-view">
					<li class="item">
						<a href="javascript:;" @click="toAdd('supervisionAdd.html',ywid)"><i class="jiandu"></i><span>新增日常监督</span></a>
					</li>
					<li class="item">
						<a href="javascript:;" @click="toAdd('penalizeAdd.html',ywid)"><i class="chufa"></i><span>新增行政处罚</span></a>
					</li>
					<li class="item">
						<a href="javascript:;" @click="local"><i class="dingwei"></i><span>定位</span></a>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script src="js/lib/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mui.min.js"></script>
	<script src="js/common/server_commonFun.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/common/rutour.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/lib/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mui.init({
			swipeBack: false //启用右滑关闭功能
		});
		mui('body').on('shown', '.mui-popover', function(e) {
			$('.detail').css({
				'backgroundImage': 'url(images/close.png)'
			})
		});
		mui('body').on('hidden', '.mui-popover', function(e) {
			$('.detail').css({
				'backgroundImage': 'url(images/detial.png)'
			})
		});
		var vm = new Vue({
			el: '#controller',
			data: {
				dataObj: {},
				flag:true,
				name:'',
				ywid:'',
				back:false
			},
			mounted: function() {
				this.init()
			},
			methods: {
				init: function() {
					mui.plusReady(function() {
						var current = plus.webview.currentWebview(),
							id = current.rid;
							vm.back = current.backs;
						var token = plus.storage.getItem('token');
						mui.ajax(rutour.scan.levelInfo + token, {
							dataType: 'json',
							type: 'get',
							data: {
								id: id
							},
							success:function(data){
								console.log(data)
								if (data.code == 200) {
									vm.dataObj = data.data;
									vm.name = data.data.enter.name;
									vm.ywid = data.data.enter.ywid
								} else{
									mui.toast(data.msg)
								}
							},
							error:function () {
								mui.toast('联系管理员去吧~')
							}
						})
					})
				},
				ckeckTab:function (event) {
					if($(event.currentTarget).hasClass('active')){
						return false
					} else {
						$('#tab a').removeClass('active');
						$(event.currentTarget).addClass('active');
						vm.flag = !vm.flag;
					}
				},
				toAdd:function (urlName,id) {
					mui('#openPopover').popover('toggle');
					$('div.mui-backdrop').remove();
					var $contentW = localStorage.getItem('$contentW'),
						$menuLeftW = localStorage.getItem('$menuLeftW');
					mui.openWindow({
						url:urlName,
						id:urlName,
						styles:{
							left: $menuLeftW,
							width: $contentW,
						},
						extras:{
							ywid:id
						}
					});
				},
				local: function() {
					mui('#openPopover').popover('toggle');
					$('div.mui-backdrop').remove();
					mui.plusReady(function() {
						plus.geolocation.getCurrentPosition(function(p) {
							var w = p.coords.latitude,
								j = p.coords.longitude;
							console.log('j:' + j + ",w:" + w)
							mui.ajax(rutour.scan.location + vm.token, {
								dataType: 'json',
								type: 'get',
								data: {
									ywid: vm.id,
									longitude: j,
									latitude: w
								},
								success: function(data) {
									if(data.code == 200) {
										mui.toast(data.msg);
									} else {
										mui.toast(data.msg)
									}
								},
								error: function() {
									mui.toast('联系管理员去吧~')
								}
							})
						}, function(e) {
							mui.toast('定位失败，请检查当前设备网络或定位权限')
						})
					})
				},
				toScan: function(urlName) {
					var nwaiting = plus.nativeUI.showWaiting();
					webviewShow = plus.webview.create(urlName, urlName);
					mui.plusReady(function () {
						var wo = plus.webview.currentWebview().opener();
						setTimeout(function () {
							wo.close();
						},300)
					})
				},
				bindClass:function () { // 等級綁定
					$('.itemContent').each(function () {
						var per = $(this).find('.face');
						var level = per.find('span').html().substring(0,1);
						per.find('i').attr('class',level)
					})
				}
			},
			updated:function () {
				this.$nextTick(function() {
					vm.bindClass()
				})
			}
		})
	</script>
</html>